<!DOCTYPE html>
<html>
<head>
    <title>首页</title>
    {% include 'admin/common/header.html' %}
    <link rel="stylesheet" href="{{ url_for('static', filename='/admin/admin/css/other/console2.css') }}"/>
</head>
<body class="pear-container">
<div class="layui-row layui-col-space10">
    <div class="layui-col-md8">
        <div class="layui-row layui-col-space10">
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">
                        训练概况
                    </div>
                    <div class="layui-card-body">
                        <div class="layui-row layui-col-space10">
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">训练类型</div>
                                    <div class="count pear-text">传染病模拟</div>
                                </div>
                            </div>
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">传染种类</div>
                                    <div class="count pear-text">6种</div>
                                </div>
                            </div>
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">处理措施</div>
                                    <div class="count pear-text">3种</div>
                                </div>
                            </div>

                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">预计完成时间</div>
                                    <div class="count pear-text">30min</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">
                        训练情况
                    </div>
                    <div class="layui-card-body">
                        <div class="layui-row layui-col-space10">
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">训练次数</div>
                                    <div class="count pear-text">7</div>
                                </div>
                            </div>
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">完成率</div>
                                    <div class="count pear-text">100%</div>
                                </div>
                            </div>
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">最快完成时间</div>
                                    <div class="count pear-text">21min分钟</div>
                                </div>
                            </div>
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">最慢完成时间</div>
                                    <div class="count pear-text">27min</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">传染源爆发区域概览</div>
                    <div class="layui-card-body">
                        <div class="layui-tab custom-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                            <div id="echarts-records" style="background-color:#ffffff;min-height:600px;"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="demo2"></div>
        </div>
    </div>
    <div class="layui-col-md4">
        <div class="layui-card">
            <div class="layui-card-header">训练信息</div>
            <div class="layui-card-body">
                <ul class="pear-card-status">
                    {% for i in disk_partitions_list %}
                        <li>
                            <p></p>
                            <p></p>
                            训练名称&nbsp;<span>传染病模拟</span>&nbsp;&nbsp;
                            重要程度<span> A</span>&nbsp;&nbsp;
                            <br/>
                            <br/>
                            7天使用总次数&nbsp;<span>1</span>&nbsp;&nbsp;
                           7天使用比例<span>100%</span>
                            <br/>
                            <a href="javascript:;" data-id="1" class="pear-btn pear-btn-xs pear-btn-primary pear-reply">详情</a>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
        <div class="layui-card">
            <div class="layui-card-header">参与信息</div>
            <div class="layui-card-body">
                <table class="layui-table" lay-skin="line">
                    <thead>
                    <tr>
                        <th>属性</th>
                        <th>值</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>名称</td>
                        <td>传染病模拟训练</td>
                    </tr>

                    <tr>
                        <td>模拟地点</td>
                        <td>深圳监所</td>
                    </tr>
                    <tr>
                        <td>参与警员数</td>
                        <td>30人</td>
                    </tr>
                    <tr>
                        <td>参与犯人数</td>
                        <td>120人</td>
                    </tr>
                    <tr>
                        <td>传染人数</td>
                        <td>3人</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
{% include 'admin/common/footer.html' %}
<script>
    layui.use(['layer', 'echarts', 'element', 'count'], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            element = layui.element,
            count = layui.count,
            echarts = layui.echarts

       var chartDom = document.getElementById('echarts-records');
var myChart = echarts.init(chartDom);
var option;

var data = [
  {
    name: '住宿区',
    children: [
      {
        name: '二食堂',
        value: 15,
        children: [
          {
            name: '住宿D区',
            value: 2
          },
          {
            name: '一食堂',
            value: 5,
            children: [
              {
                name: '住宿B区',
                value: 2
              }
            ]
          },
          {
            name: '住宿C区',
            value: 4
          }
        ]
      },
      {
        name: '二食堂',
        value: 10,
        children: [
          {
            name: '北操场',
            value: 5
          },
          {
            name: '东操场',
            value: 1
          }
        ]
      }
    ]
  },
  {
    name: '住宿A区',
    children: [
      {
        name: '工作二车间',
        children: [
          {
            name: '西操场',
            value: 1
          },
          {
            name: '三食堂',
            value: 2
          }
        ]
      }
    ]
  }
];
option = {
  series: {
    type: 'sunburst',
    // emphasis: {
    //     focus: 'ancestor'
    // },
    data: data,
    radius: [0, '90%'],
    label: {
      rotate: 'radial'
    }
  }
};

option && myChart.setOption(option);

  });

layui.use(['laypage', 'layer'], function(){
  var laypage = layui.laypage
  ,layer = layui.layer;

    laypage.render({
        elem: 'demo2'
        ,count: 100
        ,theme: '#1E9FFF'
      });
    })
</script>
</body>
</html>